@use 'sass:map';

@use '@/assets/styles/common/var.scss' as *;
@use '@/assets/styles/mixins/_button.scss' as *;
@use '@/assets/styles/mixins/mixins.scss' as *;
@use '@/assets/styles/mixins/utils.scss' as *;
@use '@/assets/styles/mixins/_var.scss' as *;

@include b(tab-ber){
    padding: 20px;

    .content {
        position: relative;
        padding: 0 20px;
        border-radius: 30px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 5px 12px rgba(203, 203, 203, 0.3);
        font-size: 20px;
        line-height: 1.6;
        overflow: hidden;

        .mask {
            position: absolute;
            inset: 0;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            transform: scale(1);
            filter: blur(10px);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .tab-bar-item {
            position: relative;
            padding: 20px 0 20px 0;
            text-align: center;

            &.active {
                color: $tts-main-color;

                .label {
                    font-weight: 700;
                }
            }

            .icon {
                position: relative;
                width: 44px;
                height: 44px;
                display: inline-block;

                .icon-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
